<template>
  <el-aside class="index-aside">
    <div class="index-aside-inner">
      <el-menu class="aside-menu" default-active="1">
        <el-menu-item class="menu-item home-item" @click="menuHandler('/')" index="1">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
        <sub-menu
          v-for="menu in menuList" 
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
        ></sub-menu>
      </el-menu>
    </div>
  </el-aside>
</template>

<script>
import SubMenu from "@/components/index/IndexAsideSub";
export default {
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: []
    };
  },
  components: {
    SubMenu
  },
  mounted() {
    // 获取动态菜单数据并且渲染
    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
  },
  methods: {
    menuHandler(path) {
      this.$router.push({ path: path });
    }
  }
};
</script>

<style lang="scss" scoped>
.index-aside {
  width: 240px;
  margin-top: 60px;
  background: #fff;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  transition: all 0.3s;

  .index-aside-inner {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }
  }

  .aside-menu {
    border: none;
    background: transparent;
  }

  .menu-item {
    height: 56px;
    line-height: 56px;
    padding: 0 20px !important;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;

    &:hover {
      background: #f6f6f6;
    }

    i {
      margin-right: 10px;
      font-size: 18px;
      color: #409EFF;
    }
  }

  .home-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
}
</style>
